<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-07 14:01:44
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-03-01 14:51:06
 * @FilePath: \vite-project\src\component\Common\Card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <van-sticky>
        <div class="selectBox">
            <van-row>
                <van-col :span="24/props.flex" :style="props.spaceBetween ? 'text-align:left;' : ''" @click="openFirst">
                    <span>{{ props.firstName }}</span>
                    <van-icon name="arrow-down" color="#999999" style="margin-left:5px;" />
                </van-col>
                <van-col :span="24/props.flex" @click="openSecond" :style="props.flex==2 ? 'text-align:right;' : ''">
                    <span>{{ props.secondName }}</span>
                    <van-icon name="arrow-down" color="#999999" style="margin-left:5px;" />
                </van-col>
                <van-col :span="24/props.flex" v-if="props.flex == 3" :style="props.spaceBetween ? 'text-align:right;' : ''" @click="openThird">
                    <span>{{ props.thirdName }}</span>
                    <van-icon name="arrow-down" color="#999999" style="margin-left:5px;" />
                </van-col>
            </van-row>
        </div>
    </van-sticky>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
interface PropsType {
    // flex 几个排列
    flex?: any
    // 第一个的名称
    firstName?: string
    // 第二个的名称
    secondName?: string
    //   第三个名称
    thirdName?: string
    //   第一个是都点击了
    firstShow?: boolean
    // 第二个是否点击了
    secondShow?: boolean
    // 第三个是否点击了
    thirdShow?: boolean
    // 是否两端对齐
    spaceBetween?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    flex: 3, // 默认下拉筛选框三个
    firstName: '', // 默认值
    secondName: '',
    thirdName: '',
    // 第一个是都点击了
    firstShow: false,
    // 第二个是否点击了
    secondShow: false,
    // 第三个是否点击了
    thirdShow: false,
    spaceBetween: false,
})
interface EmitType {
    (e: 'handleFirst'): void,
    (e: 'handleSecond'): void
    (e: 'handleThird'): void
}
const emit = defineEmits<EmitType>()
const openFirst = () => {
    emit('handleFirst')
}
const openSecond = () => {
    emit('handleSecond')
}
const openThird = () => {
    emit('handleThird')
}
</script>
<style lang="scss" scoped>
.selectBox {
    text-align: center;
    color: #999;
    background: #ffffff;
    padding: 0 0 10px 0;
}
</style>
